import { mapState } from 'vuex'
import Goods from '@/components/goods/goods.vue'
export default {
    components: {
        Goods
    },
    data() {
        return {
            goods: [], // 商品
            searchVal: '',
            isShowBox: true,
            sortType: 'price', //筛选的方式 
            priceSortKey: {
                // 价格排序
                asc: {
                    order: 1,
                    txt: '从低到高'
                },
                desc: {
                    order: -1,
                    txt: '从高到低'
                }
            },
            order: 0, // 排序方式
            priceSortKeyCurr: null, // 价格排序标签选中
            minPrice: null, // 用户输入的最低价格
            maxPrice: null, // 用户输入的最高价格
            classifyTag: ['全部'], // 分类标签
            classifyTagCurr: 0 // 分类标签默认选中
        }
    },
    computed: {
        ...mapState({ searchResultData: state => state.searchResultData }),
        // 计算商品数量
        goodsLen() {
            if (this.goods.length === 0) {
                return true
            } else {
                return false
            }
        }
    },
    created() {
        this.searchVal = this.$route.query.keyword
        this.$store.dispatch('getSearchResultData')
    },
    methods: {
        // 重新给goods赋值
        deassignGoods() {
            this.goods = []
            for (let i in this.searchResultData) {
                this.goods.push(this.searchResultData[i])
            }
        },
        chooseSort(type, flag) {
            if (this.sortType === type) {
                if (flag) {
                    this.isShowBox = !this.isShowBox
                }
            } else {
                this.sortType = type
                if (flag) {
                    this.isShowBox = true
                } else {
                    this.isShowBox = false
                }
            }
            if (type === 'comprehensive') {
                // 综合排序
                this.order = 0

            }
        },
        // 调整最低价最高价
        sortPriceFomat() {
            let tempPrice = 0
            if (
                this.minPrice !== null &&
                this.maxPrice !== null &&
                parseInt(this.minPrice) > parseInt(this.maxPrice)
            ) {
                tempPrice = this.minPrice
                this.minPrice = this.maxPrice
                this.maxPrice = tempPrice
            }
        },
        // 商品按照价格排序
        priceFilter() {
            this.deassignGoods()
            // 价格区间筛选
            this.goods = [
                ...this.goods.filter((value) => {
                    if (this.minPrice !== null && this.minPrice !== '') {
                        if (parseFloat(value.price) < parseFloat(this.minPrice)) return false
                    }
                    if (this.maxPrice !== null && this.maxPrice !== '') {
                        if (parseFloat(value.price) > parseFloat(this.maxPrice)) return false
                    }
                    return true
                })
            ]
        },
        // 排序方式选中
        priceSortKeySelect(value, index) {
            if (this.priceSortKeyCurr === index) {
                this.priceSortKeyCurr = null
                this.order = 0
            } else {
                this.priceSortKeyCurr = index
                this.order = value.order
            }
        },
        // 排序方式
        priceSort() {
            this.goods.sort((a, b) => {
                a = a['price']
                b = b['price']
                return (a === b ? 0 : a > b ? 1 : -1) * this.order
            })
        },
        // 分类标签选中
        classifyTagSelect(value, index) {
            this.classifyTagCurr = index
            this.deassignGoods()
            if (index > 0) {
                this.goods = [
                    ...this.goods.filter((val) => {
                        return val.modTitle === value
                    })
                ]
            }
        },
        // 确定按钮
        sortPriceConfirm() {
            this.isShowBox = false
            this.sortPriceFomat()
            this.priceFilter()
            this.priceSort()
        },
        // 显示筛选内容
        showBox() {
            this.isShowBox = true
        },
        // 不显示筛选内容
        unShowBox() {
            this.isShowBox = false
        }
    },
    watch: {
        searchResultData: function (value) {
            if (value) {
                for (let i in value) {
                    this.goods.push(value[i])
                    if (this.classifyTag.indexOf(value[i].modTitle) === -1) {
                        this.classifyTag.push(value[i].modTitle)
                    }
                }
            }
        }
    }
}